<template>
    <div>
        <div class="searchForm">
            <div>
                采购/退货日期： 
				<el-date-picker
				      v-model="time"
					  size="mini"
					  value-format="yyyy-MM-dd"
				      type="daterange"
				      range-separator="至"
				      start-placeholder="开始日期"
				      end-placeholder="结束日期">
				</el-date-picker>	
            </div>
            <div>
                商品名称： 
        		<el-input size="mini" v-model="search_form.goods_name" 
        		placeholder="请输入商品名称"  
        		style="width:200px;"></el-input>
            </div>
			<div>
			    采购类型： 
				<el-select v-model="search_form.type" size="mini" 
				  placeholder="请选择">
				    <el-option
				      v-for="item in typeList"
				      :key="item.value"
				      :label="item.name"
				      :value="item.value">
				    </el-option>
				  </el-select>
			</div>
            <div >
        		<div style="display: flex;">
        			<div>
        				供应商：
        			</div>
        			<div>
        				<selectCustomer :supp="search_form.supplier" 
						@getCustomerName="getCustomerName" />
        			</div>
        		</div>
            </div>
        	<div>
        	    物流单号： <el-input size="mini" 
        		v-model="search_form.logistics_number" 
        		placeholder="请输入物流单号"  
        		style="width:150px;"></el-input>
        	</div>
			<div style="margin-top: 2px;margin-left: 10px;">
				<el-checkbox v-model="is_jc" border size="mini">寄存商品</el-checkbox>
			</div>
			<div>
			    <el-button type="primary" size="mini" @click="search">检索</el-button>
			    <el-button size="mini" @click="clearSearch">重置/检索</el-button>
				<el-button type="primary" size="mini"
					style="position: absolute;top: 60px;right: 50px;"
					@click="downLode">导出</el-button>
			</div>
        </div>
        <br>
        <el-table stripe :data="list"  
			 border  
			>
			<!-- <el-table-column  align="center"   prop="id" label="ID" /> -->
			<el-table-column  align="center" width="80">
				<template slot="header" slot-scope="scope">
				    <div>	
						单据号
					</div>
				</template>
				<template slot-scope="scope">
				   <div class="button_text" @click="toInfo(scope.row)">
						{{$utils.sliceStr(scope.row.order_number,6)}}
				   </div>
				</template>
			</el-table-column>
			
			<el-table-column  align="center"   prop="buyer_date" label="入库日期" />
			
			<el-table-column  align="center" width="150">
				<template slot="header" slot-scope="scope">
					<div class="button_text" @click="sort('supplier')">
						供应商
					</div>
				</template>
				<template slot-scope="scope">
				   <div>
						{{scope.row.supplier}}
				   </div>
				</template>
			</el-table-column>
			
			<el-table-column   width="300">
				<template slot="header" slot-scope="scope">
					<div class="button_text" @click="sort('goods_name')">
						商品名称
					</div>
				</template>
				<template slot-scope="scope">
				   <div>
						{{scope.row.goods_name}}
				   </div>
				</template>
			</el-table-column>
			
			<el-table-column  align="center" width="80">
				    <template slot="header" slot-scope="scope">
						<!-- class="button_text" @click="sort('goods_number')" -->
						<div class="button_text" @click="sort('goods_number')">
							数量
						</div>
				    </template>
					
					<template slot-scope="scope">
					   <div>
						  <div v-if="scope.row.type==0">
							  -{{scope.row.goods_number}}
						  </div>
						  <div v-if="scope.row.type==1">
						  	   {{scope.row.goods_number}}					  
						  </div>
					   </div>
					</template>
			</el-table-column>
			
			<el-table-column  align="center" width="80">
				    <template slot="header" slot-scope="scope">
						<div class="button_text" @click="sort('price')">
							单价
						</div>
				    </template>
					
					<template slot-scope="scope">
					   <div>
						  {{scope.row.price}}
					   </div>
					</template>
			</el-table-column>
			
			<el-table-column  align="center" width="80">
				    <template slot="header" slot-scope="scope">
				        <div>	
							金额
				    	</div>
				    </template>
					
					<template slot-scope="scope">
					   <div>
						  <div v-if="scope.row.type==0">
							  -{{scope.row.price * scope.row.goods_number}}
						  </div>
						  <div v-if="scope.row.type==1">
							   {{scope.row.price * scope.row.goods_number}}					  
						  </div>
					   </div>
					</template>
			</el-table-column>
			
			<el-table-column  align="center" width="120"   label="类型">
					<template slot-scope="scope">
					   <div>
						  <div v-if="scope.row.type==0">
							  <el-tag 
							      size="mini"
							      type="danger"
							      effect="dark">
							     采购退货
							  </el-tag>
						  </div>
						  <div v-if="scope.row.type==1">
							  <el-tag
								size="mini"
							      effect="dark">
							     采购入库
							  </el-tag>							  
						  	  				  
						  </div>		  
					   </div>
					</template>
			</el-table-column>
			<el-table-column  align="center" width="150"
				label="串号">
				<template slot-scope="scope">
				   <div style="position: relative;">
						<div class="button_text" 
							v-if="scope.row.type==1"
							@click="lookCode(scope.row)">
							查看入库串号
						</div>
						<div v-if="scope.row.type==0">
							{{scope.row.code}}
						</div>
						
						<i class="el-icon-folder-checked"
							v-if="scope.row.is_img"
							style="position: absolute;top: 0px;
							right: 0px;cursor: pointer;"></i>
				   </div>
				</template>
			</el-table-column>
			<el-table-column  align="center"   prop="remark" label="备注" />
			
			<el-table-column  align="center" width="150">
				    <template slot="header" slot-scope="scope">
						<div class="button_text" @click="sort('logistics_number')">
							物流单号
						</div>
				    </template>
					
					<template slot-scope="scope">
					   <div>
						  {{scope.row.logistics_number}}
					   </div>
					</template>
			</el-table-column>
			
			<el-table-column  align="center"   prop="buyer_person" label="制单人" />
			<el-table-column  align="center" width="180">
				<template slot="header" slot-scope="scope">
				    <div>	
						<div class="button_text" @click="sort('add_time')">
							制单日期
						</div>
					</div>
				</template>
				<template slot-scope="scope">
				   <div>
						{{scope.row.add_time}}
				   </div>
				</template>
			</el-table-column>
        </el-table>
		
		<div style="display: flex;margin-top: 10px;float: left">
		  <div style="margin-right: 10px;">
			  数量合计：
		       <el-input size="mini" v-model="numberSum" 
			   disabled
		      style="width:150px;"></el-input>  
		  </div>
		  <div>
			  金额合计：
		      <el-input size="mini" v-model="moneySum" 
			  disabled
		      style="width:150px;"></el-input>
		  </div>
		</div>
		
		<div class="page">
		    <el-pagination
		            background
		            @size-change="pageChange"
		            @current-change="handleCurrentChange"
		            :current-page="page"
		            :page-size="pageSize"
		            layout="total, sizes, prev, pager, next, jumper"
		            :total="page_totle">
		    </el-pagination>
		</div>
		<el-dialog
		  title="查看串号"
		  :close-on-click-modal="false"
		  :visible.sync="isShowLookCode"
		  width="500px">
		  <scanCode :rowData="rowData" />
		</el-dialog>
    </div>
</template>
<script>
	import scanCode from '@/components/scanCodeLook.vue'
	import selectCustomer from '@/components/selectCustomer.vue'
    export default {
        components:{
			scanCode,selectCustomer
        },

        data(){
            return {
				numberSum:0,
				moneySum:0,
				typeList:[
					{
						name:'全部',
						value:'-1'
					},
					{
						name:'采购退货',
						value:'0'
					},
					{
						name:'采购入库',
						value:'1'
					}
				],
				list:[],
                rowData:{},
				isShowLookCode:false,
				pageSize:20,
				page:1,
				page_totle:0,
				search_form:{
					supplier:'',
					buyer_date:"",
					goods_name:"",
					logistics_number:"",
					start_time:"",
					end_time:"",
					type:'-1'
				},
				time:[],
				is_jc:false,
				order_form:{
					add_time:'',
					supplier:"",
					goods_name:"",
					goods_number:"",
					price:"",
					logistics_number:'',
					sales_price:''
				},
            }
        },
		watch:{
			is_jc:{
				handler(){
					this.search()
				}
			}
		},
        mounted(){
            document.title = '采购日报'
			let now = this.$utils.formatNowDate(2)
			this.time = [now,now]
			// this.search_form.buyer_date = this.$utils.formatNowDate(2)
			this.lodeList()
        },
        methods:{
			downLode(){
				let cid = sessionStorage.getItem('cid')
				
				if(this.time.length == 2){
					this.search_form.start_time = this.time[0]
					this.search_form.end_time = this.time[1]
				}else{
					this.search_form.start_time = ''
					this.search_form.end_time = ''
				}
				
				
				 var start_time
				 if(this.search_form.start_time){
				 	 start_time = '&start_time=' + this.search_form.start_time
				 }else{
				 	 start_time = '&start_time='
				 }
				 
				 var end_time
				 if(this.search_form.end_time){
				 	 end_time = '&end_time=' + this.search_form.end_time
				 }else{
				 	 end_time = '&end_time='
				 }
				 
				 var goods_name
				 if(this.search_form.goods_name){
				 	 goods_name = '&goods_name=' + this.search_form.goods_name
				 }else{
				 	 goods_name = '&goods_name='
				 }
				 
				 var supplier
				 if(this.search_form.supplier){
				 	 supplier = '&supplier=' + this.search_form.supplier
				 }else{
				 	 supplier = '&supplier='
				 }
				 
				 var logistics_number
				 if(this.search_form.logistics_number){
				 	 logistics_number = '&logistics_number=' + this.search_form.logistics_number
				 }else{
				 	 logistics_number = '&logistics_number='
				 }
				 
				 var type
				 
				 if(this.search_form.type){
				 	 type = '&type=' + this.search_form.type
				 }else{
				 	 type = '&type='
				 }
				 
				 var is_jc
				 
				 if(this.search_form.is_jc){
				 	 is_jc = '&is_jc=1'
				 }else{
				 	 is_jc = '&is_jc=0'
				 }
				
				let url = `${this.$domain}/excel/exportBuyerDayInfo?cid=${cid}${is_jc}${supplier}${type}${logistics_number}${start_time}${end_time}${goods_name}`
				location.href = url
			},
			sort(key){
				for(let i in this.order_form){
					if(i==key){
						if(this.order_form[i]==1){
							this.order_form[i] = 2
						}else{
							this.order_form[i] = 1
						}
					}else{
						this.order_form[i] = ''
					}
				}
				this.lodeList()
			},
			getCustomerName(val){
				this.search_form.supplier = val
			},
			clearSearch(){
				this.search_form  = {
				        supplier:'',
				        buyer_date:"",
				        goods_name:"",
				        logistics_number:"",
						type:'-1'
				}
				// this.time = []
				this.is_jc = false
				this.page=1
				this.lodeList()
			},
			
			lookCode(row){
				if(typeof(row.code_arr) == 'string'){
					row.code_arr = JSON.parse(row.code_arr)
				}
				this.rowData = row
				setTimeout(()=>{
					this.isShowLookCode = true
				},100)
			},
            lodeList(){
				if(this.time.length == 2){
					this.search_form.start_time = this.time[0]
					this.search_form.end_time = this.time[1]
				}else{
					this.search_form.start_time = ''
					this.search_form.end_time = ''
				}
				let params = {
					search_form:this.search_form,
					page:this.page,
					pageSize:this.pageSize,
					is_jc:this.is_jc,
					order_form:this.order_form
				}
				this.$post('/buyerSys/getBuyerList',params,res=>{
					let data = res.data.data
					this.page_totle = data.count
					this.list = data.result
					this.numberSum = data.numberBuyer - data.numberBuyerReturn
					this.moneySum = (data.moneyBuyer - data.moneyBuyerReturn).toFixed(2)
				})
			},            
        }
    }
</script>
